Stabilize vertical-tab drag visuals: overlay drop marker + post-drop hover reset by Copilot · Pull Request #2964 · wavetermdev/waveterm

Copilot · 2026-03-02T19:16:23Z

Dragging in the vertical tab bar had two UX artifacts: the drop marker reserved layout space (leaving a visible accent gap above selected tabs), and hover styling could remain on the old row after drop until the mouse moved. This updates drag visuals to be overlay-based and forces hover recalculation at drag end.

Drop marker moved out of flow (no selected-tab accent gap)
- Replaced per-row in-flow divider placeholders with a single absolutely positioned drop line in the scroll container.
- Drop line now aligns to actual tab boundaries (offsetTop / offsetHeight) so it covers the divider location directly.
Drop target rendering simplified
- Container is relative; marker is conditionally rendered only while reordering.
- dropLineTop is tracked during drag events and used to position the marker without affecting layout.
Stale hover state cleared after drop
- Added a minimal drag-lifecycle reset mechanism (hoverResetVersion) and used it in VTab keys.
- On drag end/drop, rows remount once, clearing browser-retained :hover on the old index immediately.

<VTab key={`${tab.id}:${hoverResetVersion}`} ... />

{dragTabId != null && dropIndex != null && dropLineTop != null && (
    <div
        className="pointer-events-none absolute left-0 right-0 border-t-2 border-accent/80"
        style={{ top: dropLineTop, transform: "translateY(-1px)" }}
    />
)}

- https://github.com/user-attachments/assets/8c25ef6f-c600-484e-a4fa-6ac83657b484

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

cloudflare-workers-and-pages · 2026-03-02T19:25:05Z

Deploying waveterm with Cloudflare Pages

Latest commit:	`48919f6`
Status:	✅ Deploy successful!
Preview URL:	https://bd31d368.waveterm.pages.dev
Branch Preview URL:	https://copilot-create-vertical-tab.waveterm.pages.dev

View logs

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

kilo-code-bot · 2026-03-03T17:01:15Z

frontend/app/tab/vtab.tsx

+export interface VTabItem {
+    id: string;
+    name: string;
+    indicator?: TabIndicator | null;


CRITICAL: Missing import for TabIndicator type

The TabIndicator type is used here but not imported. It's defined in frontend/types/gotypes.d.ts as a global type, but TypeScript may not resolve it correctly without proper context. Additionally, the TabIndicator type has a required priority: number field that is not being handled in this interface definition.

The global TabIndicator type includes:

icon: string (required)

color?: string (optional)

priority: number (required)

clearonfocus?: boolean (optional)

persistentindicator?: TabIndicator (optional)

This will cause runtime issues when the indicator is used without the required priority field.

kilo-code-bot · 2026-03-03T17:01:15Z

frontend/preview/previews/vtabbar.preview.tsx

+
+const InitialTabs: VTabItem[] = [
+    { id: "vtab-1", name: "Terminal" },
+    { id: "vtab-2", name: "Build Logs", indicator: { icon: "bell", color: "#f59e0b" } },


CRITICAL: Missing required priority field in TabIndicator

The TabIndicator type (defined in frontend/types/gotypes.d.ts) has a required priority: number field. This indicator object is missing it, which will cause type errors and potential runtime issues.

Suggested change

{ id: "vtab-2", name: "Build Logs", indicator: { icon: "bell", color: "#f59e0b" } },

{ id: "vtab-2", name: "Build Logs", indicator: { icon: "bell", color: "#f59e0b", priority: 1 } },

kilo-code-bot · 2026-03-03T17:01:28Z

Code Review Summary

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	2
WARNING	0
SUGGESTION	0

Issue Details (click to expand)

CRITICAL

File	Line	Issue
`frontend/app/tab/vtab.tsx`	13	Missing import for `TabIndicator` type and missing required `priority` field handling
`frontend/preview/previews/vtabbar.preview.tsx`	9	Missing required `priority` field in `TabIndicator` object

Files Reviewed (3 files)

frontend/app/tab/vtab.tsx - 1 issue
frontend/app/tab/vtabbar.tsx - No issues
frontend/preview/previews/vtabbar.preview.tsx - 1 issue

Fix these issues in Kilo Cloud

Initial plan

dba46ec

Copilot AI assigned Copilot and sawka Mar 2, 2026

Copilot started work on behalf of sawka March 2, 2026 19:16 View session

feat: add vertical tab bar components and preview

99bb4a6

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add vertical tab bar component for Wave~~ Add standalone Tailwind vertical tab bar + preview (new vtab/vtabbar) Mar 2, 2026

Copilot finished work on behalf of sawka March 2, 2026 19:30

Copilot started work on behalf of sawka March 2, 2026 20:03 View session

fix: refine vtabbar drag drop indicators

189338b

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~Add standalone Tailwind vertical tab bar + preview (new vtab/vtabbar)~~ Refine vertical tab bar DnD UX: use global TabIndicator and add explicit insertion marker Mar 2, 2026

Copilot finished work on behalf of sawka March 2, 2026 20:12

Copilot started work on behalf of sawka March 2, 2026 20:20 View session

fix: prevent vtabbar drop line layout jump

c53ef4a

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~Refine vertical tab bar DnD UX: use global TabIndicator and add explicit insertion marker~~ Polish vertical tab DnD UX: shared TabIndicator, no hover noise, stable drop marker layout Mar 2, 2026

Copilot finished work on behalf of sawka March 2, 2026 20:29

Copilot started work on behalf of sawka March 2, 2026 20:53 View session

fix: polish vertical tab indicator and close affordance

d8063d8

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~Polish vertical tab DnD UX: shared TabIndicator, no hover noise, stable drop marker layout~~ Polish vertical tab DnD/controls UX: stable drop marker, left indicator, tooltip removal Mar 2, 2026

Copilot finished work on behalf of sawka March 2, 2026 21:02

Copilot started work on behalf of sawka March 2, 2026 21:21 View session

fix: make vertical tab title width dynamic on hover

a708ad8

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~Polish vertical tab DnD/controls UX: stable drop marker, left indicator, tooltip removal~~ Polish vertical tab row layout: dynamic title width, precise close alignment, and tooltip/hover cleanup Mar 2, 2026

Copilot finished work on behalf of sawka March 2, 2026 21:30

Copilot started work on behalf of sawka March 2, 2026 23:20 View session

fix: tighten vertical tab spacing and add inline rename

6704e53

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~Polish vertical tab row layout: dynamic title width, precise close alignment, and tooltip/hover cleanup~~ Refine vertical tab layout density and add inline rename for left tabs Mar 2, 2026

Copilot finished work on behalf of sawka March 2, 2026 23:40

Copilot started work on behalf of sawka March 3, 2026 01:25 View session

fix: overlay vtab drop indicator to remove accent gap

bbac1af

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~Refine vertical tab layout density and add inline rename for left tabs~~ Fix left-tab drop indicator gap and align drag marker with divider Mar 3, 2026

Copilot finished work on behalf of sawka March 3, 2026 01:39

Copilot started work on behalf of sawka March 3, 2026 01:52 View session

fix: reset vtab hover state after drag drop

48919f6

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Copilot AI changed the title ~~Fix left-tab drop indicator gap and align drag marker with divider~~ Stabilize vertical-tab drag visuals: overlay drop marker + post-drop hover reset Mar 3, 2026

Copilot finished work on behalf of sawka March 3, 2026 02:01

sawka marked this pull request as ready for review March 3, 2026 16:59

sawka merged commit e2b2498 into main Mar 3, 2026
6 checks passed

sawka deleted the copilot/create-vertical-tab-bar branch March 3, 2026 17:00

kilo-code-bot bot reviewed Mar 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stabilize vertical-tab drag visuals: overlay drop marker + post-drop hover reset#2964

Stabilize vertical-tab drag visuals: overlay drop marker + post-drop hover reset#2964
sawka merged 9 commits intomainfrom
copilot/create-vertical-tab-bar

Copilot AI commented Mar 2, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

kilo-code-bot bot Mar 3, 2026

Uh oh!

kilo-code-bot bot Mar 3, 2026

Uh oh!

kilo-code-bot bot commented Mar 3, 2026

CRITICAL

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	{ id: "vtab-2", name: "Build Logs", indicator: { icon: "bell", color: "#f59e0b" } },
	{ id: "vtab-2", name: "Build Logs", indicator: { icon: "bell", color: "#f59e0b", priority: 1 } },

Conversation

Copilot AI commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying waveterm with Cloudflare Pages

Uh oh!

Uh oh!

kilo-code-bot bot Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

kilo-code-bot bot Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

kilo-code-bot bot commented Mar 3, 2026

Code Review Summary

Overview

CRITICAL

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Mar 2, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 2, 2026 •

edited

Loading